<template>
  <div class="box7">
    <div class="k_top_con">
      <p>{{title}}</p>
    </div>
    <div class="k_main_con">
      <slot name="center"></slot>
    </div>
  </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      }
    },
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.box7 { position: relative; width: 100%; height: 100%;}
.box7 .k_top_con { height: 54px; position: relative;}
.box7 .k_top_con::before { content: ''; position: absolute; left: 0; top: 0; background: url(~@/assets/images/borderBox/box7/k_top_bgl.png) no-repeat left top; height: 84px; width: calc(100% - 116px);}
.box7 .k_top_con::after { content: ''; position: absolute; right: 0; top: 0; background: url(~@/assets/images/borderBox/box7/k_top_bgr.png) no-repeat right top; height: 84px; width: 180px;}
.box7 .k_top_con p { position: relative; z-index: 9; font-size: 22px; color: #fff; line-height: 54px; padding: 0 40px;}
.box7 .k_top_con p img { vertical-align: middle; margin-top: -10px; margin-right: 15px;}
.box7 .k_main_con { height: 100px; border: 1px solid #4ce6e0; border-top: none; background-color: rgba(1, 24, 51, 0.85); padding: 12px; box-sizing: border-box; height: calc(100% - 54px);}
.box7::after { content: ''; position: absolute; width: 20px; height: 20px; background: url(~@/assets/images/borderBox/box7/k_box_dot.png) no-repeat; right: 0; bottom: 0;}
</style>